<template>
    <div>
      <div class="mycity" @click="selectLocation()">
        <span id="qyxs">{{location}}</span>
      </div>
      <div v-show="isShowCitys" class="city">
        <div class="city_div">
          我的城市：&nbsp;&nbsp;<span id="qyxs" style="color:#00bf47">{{location}}</span>
        </div>
        <div class="city-wrapper city-wrapper-hook">
          <div class="scroller-hook">
            <div class="cities cities-hook">
              <div v-for="i in cityData">
                <div class="title">{{i.name}}</div>
                <ul>
                  <li v-for="item in i.cities" class="item city-click" :data-name="item.name" :data-id="item.code" @touchend="touchUp(item)" @touchstart="chooseCity()">
                    <span class="border-1px name">{{item.name}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="shortcut shortcut-hook" style="right: 10px;top:100px !important;" @touchstart="touchIndex">
            <ul style="width: 50px;text-align: left;padding: 20px 0">
              <li v-for="i in cityData" :data-anchor="i.name" class="item">{{i.name.substr(0, 1)}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="toast" v-show="toastShow">
        {{toastText}}
      </div>
    </div>
</template>

<script>
    export default {
        name: "map",
      data() {
        return {
          origin: 'http://192.168.99.205:800',
          captchaBoxShow: false,
          test: '测试',
          countTime: 0,
          countTimer: null,
          time: 60,
          location: '定位中',
          submit: {
            sms_captcha  : '',
            captcha      : '',
            area_code    : '',
            _token       : '',
          },
          map: new AMap.Map("container", {
            resizeEnable: true,
            //city: citycode,
            zoom: 17, //地图显示的缩放级别
            keyboardEnable: false,
            citylimit: true,
            resizeEnable: true
          }),
          cityWrapper: document.querySelector('.city-wrapper-hook'),
          cityScroller: document.querySelector('.scroller-hook'),
          cities: document.querySelector('.cities-hook'),
          shortcut: document.querySelector('.shortcut-hook'),
          shortcutList: [],
          cityData: cityData,// 数据源
          scroll: null,
          anchorMap: {},
          touch: {},
          toastShow: false,
          isShowCitys: false,
          toastText: '',
        };
      },
      mounted() {
        //注释注释
        this.zddw()
        this.initCities()
      },
      methods: {
        toast (str) {
          let v = this
          v.toastText = str
          v.toastShow = true
          setTimeout(function(){
            v.toastShow = false
          }, 1500)
        },
        chooseCity (city) {
          let v = this
          v.countTime = 0
          v.countTimer = setInterval(function(e){v.countTime ++},1)
        },
        touchUp (item) {
          let v = this
          clearInterval(v.countTimer)
          if (v.countTime < 30) {
            this.isShowCitys = false
            this.location = item.name
            this.submit.area_code = item.code
          }
        },
        selectLocation () {
          let v = this
          this.isShowCitys = true
          this.$nextTick(function() {
            this.initCities()
          })
        },
        geocoder_CallBack: function (data) {
          let v = this
          var adcode3     = data.regeocode.addressComponent.adcode;
          var address     = data.regeocode.formattedAddress; //返回地址描述
          var csqy        = data.regeocode.addressComponent.district; //地区
          var csadcode    = data.regeocode.addressComponent.adcode; //区域编码
          this.submit.area_code = csadcode
          var citycode2   = csadcode.substr(0, 4) + "00"; //省份编码
          var codes       = adcode3.substr(0, 4) + "00";
          var citys2      = data.regeocode.addressComponent.city;
          var poiArr      = data.regeocode.pois; //坐标
          var resultCount = poiArr.length;
          v.location      = csqy
          var dz          = data.regeocode.formattedAddress;
          var lng         = data.regeocode.roads[0].location.lng;
          var lat         = data.regeocode.roads[0].location.lat;
        },
        zddw: function () {
          //初始定位
          let v = this
          v.map.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, //是否使用高精度定位，默认:true
              //timeout: 10000, //超过10秒后停止定位，默认：无穷大
              buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              noIpLocate: 0, //IP定位，0-3，0都可以使用
              noGeoLocation: 0, //浏览器定位 0-3,
              showCircle: false, //去除定位蓝圈
              buttonPosition: 'RT',
              extensions: 'all'
            });
            v.map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
            AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
          });
          //解析定位结果
          function onComplete(data) {
            var str = [];
            str.push(data.position.lng);
            str.push(data.position.lat);
            var geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: "all"
            });
            geocoder.getAddress(str, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                v.geocoder_CallBack(result);
              }
            });
          }
          // 解析定位错误信息
          function onError(data) {
            alert('定位失败,请手动选择所在区域');
          }
        },
        initCities: function () {
          let v = this
          let y = 0;
          var titleHeight = 28
          var itemHeight = 44
          v.cityData.forEach(function(e){
            let name = e.name.substr(0, 1)
            let len = e.cities.length
            v.anchorMap[name] = y
            y -= titleHeight + len * itemHeight
          })
          v.shortcut = document.querySelector('.shortcut-hook')
          v.cityWrapper = document.querySelector('.city-wrapper-hook')
          v.shortcut.style.top = (v.cityWrapper.clientHeight - v.shortcut.clientHeight) / 2 + 'px';
          v.scroll = new window.BScroll(v.cityWrapper, {
            probeType: 3
          })
          // console.log(v.scroll, 'v.scroll')
          // v.scroll.hasVerticalScroll = true
          // v.scroll.wrapperHeight = $('body').height()
          v.scroll.scrollTo(0, 0);
        },
        touchIndex: function (e) {
          // console.log(e, 'e')
          let v = this
          let anchor = e.target.getAttribute('data-anchor')
          // console.log(anchor ,'anchor')
          let firstTouch = e.touches[0]
          v.touch.y1 = firstTouch.pageY
          v.touch.anchor = anchor
          v.scrollTo(anchor)
        },
        scrollTo: function (anchor) {
          let v = this
          v.cityScroller = document.querySelector('.scroller-hook')
          var maxScrollY = v.cityWrapper.clientHeight - v.cityScroller.clientHeight
          var y = Math.min(0, Math.max(maxScrollY, v.anchorMap[anchor]))
          if (typeof y !== 'undefined') {
            v.scroll.scrollTo(0, y);
          }
        },

      }
    }
</script>

<style scoped>
  @import "../../assets/css/city.css";
</style>
